﻿/**
 * @fileOverview
 * This file is the codes about the dialog displaying and setting.
 * @author Tzu-yang Tsai
 * @version 0.1.1.α
 */

/**
 * @namespace
 */
var Dialog = new function(){
	/* The Message Data */
	var obj,
	/* The Div element which display "obj" */
	divElement=null,
	divElementDisplayed = false;

/**
 * @see Dialog.displayMessage
 * @param {Object|String} messageData The information of the message. If it is an object, it should be an object as :
 * <pre>{
 * 	<span style="font-weight: bold;">message</span>: String ,
 * 	<span style="font-weight: bold;">images</span> (Optional): String ,
 * 	<span style="font-weight: bold;">MessageBTN</span> (Optional): {
 * 		Button message : the button click function. Also, the function only support one arguement: MouseEvent.
 * 	}
 * 	<span style="font-weight: bold;">css</span> (Optional): {String|Object} The css style of displayed message box. can be set as "color: red" or {color: 'red', background-color: 'blue'}
 * }</pre>
 * If it is a string, it will be set as the "message" of the object.
 * @example
 * Dialog.setMessage(
 * 	{
 * 		message: "Player 1 has discard &#8220;<span class="unicode">🀑</span>&#8221;. What do you want to do? ",
 * 		MessageBTN : {
 * 			"Kong it" : function(){
 * 				players[0].kongAction(players[1].discardTiles.lastItem());
 * 			},
 * 			"Pong it" : function(){
 * 				players[0].pongAction(players[1].discardTiles.lastItem());
 * 			}
 * 		}
 * 	}
 * );
 */
	this.setMessage = function (messageData){
		if(obj || divElement) return;
		/*
		{
			message: String ,
			images (Optional): String[] ,
			MessageBTN (Optional): {
				Button message : the button click function
			},
			css (Option): String
		}
		*/
		if(typeof messageData == "object")
			obj=messageData;
			if(obj.css && typeof obj.css == "string"){
				var arr = obj.css.split(";");
				var o = {};
				for(var i = 0; i < arr.length; i++){
					var j = arr[i].split(":");
					if(j[0] && j[1]){
						//avoid undefined
						j[0] = j[0].replace(/ /g, "");
						o[j[0]] = j[1];
					}
				}
				obj.css = o;
			}
		else if(typeof messageData == "string"){
			if(messageData.indexOf("{")<0 && messageData.indexOf("}")<0){
				obj = {"message":messageData};
			}else if(messageData.indexOf("message")){
				obj = JSON.parse(messageData)
			}
		}
	};

	var removeDivElement=function(){
		document.body.removeChild(divElement);
		divElement=null;
		divElementDisplayed = false;
		obj = null;
	}

/**
 * @see Dialog.setMessage
 */
	this.displayMessage = function(){
		if((!obj || typeof obj != "object")  && ( !divElement || divElementDisplayed))
			return;

		//set divElement
		var DEFAULE_CSS_STYLE = {
			"position":"fixed",
			"top":"100px",
			"left":(screen.availWidth/2)+"px",
			"min-width":" 300px",
			"border-width ":" 1px",
			"border-color":
			"rgb(64, 64, 64)",
			"border-style":" solid",
			"border-radius":" 11px",
			"background-size": "100% 22px, 100% 100%",
			"moz-background-size":"100% 22px, 100% 100%",
			"background-color":" #ababab",
			"background-image":
				[
					"       -webkit-gradient(linear, left top, left bottom, from(#a8a8a8), to(#2b272b)),	\
					        -webkit-gradient(linear, left top, left bottom, from(#ababab), to(#f0f0f0))",
					"-webkit-linear-gradient(top, #a8a8a8, #2b272b), 	\
					 -webkit-linear-gradient(top, #ababab, #f0f0f0)",
					"   -moz-linear-gradient(top, #a8a8a8, #2b272b), 	\
					    -moz-linear-gradient(top, #ababab, #f0f0f0)",
					"    -ms-linear-gradient(top, #a8a8a8, #2b272b), 	\
					     -ms-linear-gradient(top, #ababab, #f0f0f0)",
					"     -o-linear-gradient(top, #a8a8a8, #2b272b), 	\
					      -o-linear-gradient(top, #ababab, #f0f0f0)",
					"        linear-gradient(to bottom, #a8a8a8, #2b272b), 	\
					         linear-gradient(to bottom, #ababab, #f0f0f0)"
				],

			"background-repeat":"no-repeat",
			"padding":" 0 11px",
			"font-family":"arial",
			"color":" rgb(47, 45, 67)"
		};
		if(obj.css){
			for(var i in obj.css){
				DEFAULE_CSS_STYLE[i] = obj.css[i];
			}
		}
		var divElement_css = "";
		for(var i in DEFAULE_CSS_STYLE){
			theCSS = DEFAULE_CSS_STYLE[i];
			if(theCSS instanceof Array){
				theCSS = theCSS.join("; "+ i + ":");
			}
			divElement_css+= i+":"+ theCSS + ";";
		}


		divElement = document.createElement("div");
		divElement.style.cssText=divElement_css;
		divElement.draggable="true";
		divElement.addEventListener("drag", function(e){
			this.style.top = ( e.clientY  ) + "px";
			this.style.left = ( e.clientX  )+"px";
			if(parseInt(this.style.top) < 0) this.style.top = "0px";
			if(parseInt(this.style.left) < 0) this.style.left = "0px";
		}, false);
		divElement.className="Message";

		//set close button
		var cbtn = document.createElement("button");
		cbtn.innerHTML = "X";
		cbtn.style.cssText = "color: white; \
			background-color: red; \
			height: 22px; width: 22px; \
			font-family: monospace; float: right; \
			border-radius: 11px 11px;";
		cbtn.addEventListener("click", function(e){
			removeDivElement();
		}, false);
		divElement.appendChild(cbtn);

		//set message
		divElement.appendChild(document.createElement("p"));
		divElement.getElementsByTagName("p")[0].innerHTML = obj.message || "";
		divElement.getElementsByTagName("p")[0].style.cssText = "margin-top: -11px; clear:both;";
		//set images
		if(obj.images){
			var imgListElem = document.createElement("div");
			imgListElem.id= "imgList";
			imgListElem.className = "imgListElem";
			for(var i = 0; i < obj.images.length; i++){
				imgListElem.innerHTML += "<img src=\""+obj.images[i]+"\" class=\"messageImages\"  >";
			}

			divElement.appendChild(imgListElem);
		}

		//set MessageBTN
		var btnList = document.createElement("div");
		btnList.id= "btnList";
		btnList.className = "btnList ";
		for(var i in obj.MessageBTN){
			var btn = document.createElement("button");
			btn.innerHTML = i;
			btn.addEventListener("click",function(e){
				if(typeof obj.MessageBTN[i] == "function"){
					obj.MessageBTN[i](e);
				}
				removeDivElement();
				console.log(i);
			}, !1);
			btnList.appendChild(btn);
		}
		divElement.appendChild(btnList);
		document.body.appendChild(divElement);
		divElementDisplayed = true;
		console.log(divElement);
	};

};
